import React from 'react'
import { ALLSTATE } from "../../types/store.d"
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"
import { Grid, Image, Toast, NavBar } from 'react-vant';
import * as Action from '../../actions/index';
function Address() {
    const navigate=useNavigate()
    const dispatch = useDispatch()
    const addressArr = useSelector((state: ALLSTATE) => {
        return state.addressArr
    })
    const deladdress=(id:number)=>{
       console.log(id);
       dispatch(Action.del_address(id))
    }
    return (
        <div>
            <NavBar
                title="标题"
                leftText="返回"
                rightText="新增地址"
                onClickLeft={() => navigate("/")}
                onClickRight={() => navigate("/addaddress")}
            />
            <Grid border={false} columnNum={1}>
                {
                   addressArr.map((item, index) => {
                        return <Grid.Item key={index} style={{background:"#ccc",width:"100%",height:"60px"}}>
                            <p>用户名：{item.name}  地址：{item.address}</p>
                            <p>楼层：{item.floor}手机号：{item.phone}</p>
                            <p><button onClick={()=>navigate("/editaddress",{state:item})}>编辑</button><button onClick={()=>deladdress(item.id)}>删除</button></p>
                        </Grid.Item>
                    })
                }

            </Grid>

        </div>
    )
}

export default Address